Pular para o conteúdo principal
Disclaimer

The mentioned functionalities may be restricted depending on the purchased software license.

Gestão de Modelos de Exibição Pública

Modelos de exibição pública são a base de suas visualizações personalizadas. Eles definem o layout, a estrutura e os elementos visuais que serão aplicados às suas instalações. Este guia abrangente cobre tudo, desde a criação básica de modelos até técnicas de design avançadas.

📋 Visão Geral​

O que são Modelos de Exibição Pública?​

Os modelos servem como plantas reutilizáveis que:

  • 📐 Definem layouts visuais para suas exibições públicas
  • 🧩 Organizam blocos de conteúdo e sua posicionamento
  • 🎨 Estabelecem consistência de design em várias instalações
  • ⚙️ Permitem um rápido deploy de visualizações padronizadas
  • 🔄 Suportam atualizações fáceis em todas as configurações vinculadas

Principais Benefícios​

BenefícioDescrição
🚀 EficiênciaCrie uma vez, use em várias instalações
🎯 ConsistênciaMantenha padrões de design uniformes
🔧 FlexibilidadeModificação fácil sem recriar do zero

🚀 Primeiros Passos​

Fluxo de Trabalho do Modelo​

  1. 📐 Desenhar Layout - Planeje sua estrutura visual
  2. 🎨 Criar Modelo - Construa usando o editor de modelos
  3. 💾 Salvar Modelo - Armazene para reutilização em instalações

Pré-requisitos​

Antes de criar modelos, certifique-se de ter:

  • ✅ Conta SmartgridX com permissões apropriadas
  • ✅ Objetivos de design claros para sua visualização
  • ✅ Requisitos de conteúdo (imagens, pontos de dados, layouts)

🎛️ Interface de Gestão de Modelos​

Acessando o Gerenciador de Modelos​

infographicimage

Passos de navegação:

  1. Faça login em sua conta SmartgridX
  2. Navegue até 'Exibições Públicas' na barra lateral principal
  3. Clique no botão 'Modelo de Exibição Pública' na página de visão geral

Isso abre a interface de gestão de modelos onde você pode visualizar, criar, editar e excluir modelos.

Tabela de Visão Geral dos Modelos​

infographicimage

Ações disponíveis:

  • ➕ Adicionar - Botão verde para iniciar a criação de um modelo
  • ✏️ Editar - Modificar o design de um modelo existente
  • 🗑️ Excluir - Remover modelo não utilizado

🎨 Processo de Criação de Modelos​

Iniciando um Novo Modelo​

Clique no botão "Criar Novo Modelo" para abrir a interface do editor de modelos.

Configuração do Cabeçalho do Modelo​

infographicimage

Configurações do Título​

Título do Modelo:

  • Propósito: Identifica o modelo em listas e configurações
  • Melhores práticas: Use nomes descritivos e específicos do projeto
  • Exemplos: "Fábrica-KPI-Dashboard", "Layout-Monitoramento-Energético", "Exibição-Multi-Zona"

Configuração de Margem​

As configurações de margem definem a área segura a partir das bordas de exibição:

Controle deslizante de margem (0-100px):

  • 📐 Faixa: 0 a 100 pixels a partir da borda da exibição
  • 🎯 Propósito: Cria espaçamento seguro para evitar corte de conteúdo
  • 📱 Aplicação: Garante visibilidade em vários tipos de exibições
  • ⚙️ Recomendação: Use 10-20px para exibições padrão, 30-50px para telas de borda a borda

Impacto visual:

  • 0px de margem - O conteúdo se estende até as bordas da exibição
  • 50px de margem - O conteúdo começa 50 pixels a partir de todas as bordas
  • 100px de margem - Área segura máxima com espaçamento considerável nas bordas

Funcionalidade de Salvar​

O botão 💾 Salvar (canto superior direito) permite que você salve seu modelo atual.

🧩 Sistema de Layout de Blocos​

Entendendo o Sistema de Grid​

infographicimage

Fundamentos do Grid​

O editor de modelos usa um sistema de grid baseado em porcentagem de 100×100:

Propriedades do Grid:

  • 📐 Dimensões: 100 unidades de largura × 100 unidades de altura
  • 📊 Unidades: Valores percentuais (1 unidade = 1% da dimensão total)
  • 🎯 Precisão: Permite posicionamento e dimensionamento exatos
  • 📱 Responsivo: Adapta-se automaticamente a diferentes tamanhos de tela

Exemplos de Layout de Blocos​

Configuração: 100 de largura × 100 de altura
Resultado: Cobertura em tela cheia
Caso de uso: Visualização grande única, imagem em tela cheia

┌─────────────────────────────────┐
│                                 │
│         BLOCO TOTAL             │
│                                 │
│                                 │
└─────────────────────────────────┘

Manipulação de Blocos​

Adicionando Blocos​

Método: Clique no botão "Adicionar Bloco" (canto superior direito do editor)
Resultado: Um novo bloco aparece com dimensões padrão
Próximos passos: Posicione e redimensione conforme necessário

Posicionando Blocos​

Arrastar e Soltar:

  • 🖱️ Clique e segure qualquer bloco para movê-lo
  • 📍 Pré-visualização em tempo real mostra a posição ao arrastar
  • 🧲 Alinhamento com o grid ajuda no posicionamento preciso
  • 👁️ Guias visuais aparecem para ajudar no alinhamento

Redimensionando Blocos​

Controle de Redimensionamento:

  • 📐 Canto inferior direito mostra o controle de redimensionamento quando o bloco está selecionado
  • 🔧 Arraste para redimensionar largura e altura simultaneamente
  • 📊 Valores em tempo real exibem as dimensões atuais

Controles de Precisão​

infographicimage

Painel de Posição do Lado Direito​

Quando um bloco é selecionado, o painel direito fornece:

Controles de Posição:

  • 📍 Posição X - Deslocamento horizontal da borda esquerda (0-100)
  • 📍 Posição Y - Deslocamento vertical da borda superior (0-100)
  • 🎨 Z-Index - Ordem de camada para blocos sobrepostos
  • 📏 Largura - Percentagem da largura do bloco (1-100)
  • 📏 Altura - Percentagem da altura do bloco (1-100)

⚙️ Configuração do Bloco​

Tipos e Propriedades de Blocos​

infographicimage

Acessando a Configuração do Bloco​

Método:

  1. Selecione um bloco na tela do editor
  2. Painel de configuração aparece na parte inferior da tela
  3. O dropdown do tipo de bloco é a principal opção de configuração

Nota: Nem todos os blocos são atualmente configuráveis. Isso mudará conforme o desenvolvimento avança. Mais tipos de blocos serão adicionados em atualizações futuras.

Tipos de Blocos Disponíveis​

Propósito: Exibir imagens estáticas, logotipos, fundos, GIFs
Opções de configuração:

  • 📁 Fonte da imagem - Faça upload ou insira um URL que será usado como padrão para este bloco. Você pode deixar isso vazio se quiser forçar uma imagem a ser selecionada na configuração

Casos de uso:

  • Logotipos e branding da empresa
  • Imagens de fundo
  • Fotos de equipamentos
  • GIFs

Exemplos de Template​

imageminfografica

Este exemplo demonstra um template bem estruturado com:

  • 📊 Organização clara dos blocos com rótulos descritivos
  • 📐 Espaçamento e alinhamento adequados
  • 🎯 Tipos de blocos funcionais para diferentes necessidades de conteúdo

Nomeação de blocos neste exemplo:

  • Cada bloco mostra seu propósito pretendido
  • Rótulos claros ajudam na configuração
  • Organização lógica apoia a manutenção

📚 Documentação Relacionada​

Próximos Passos​

Após criar seu template:

  1. ⚙️ Configurar Instalações - Aplicar templates a instalações específicas
  2. 🎛️ Vincular Controladores - Conectar ao hardware de exibição
  3. 🚀 Guia de Introdução - Visão geral do fluxo de trabalho

Tópicos Avançados​

  • 🎨 Técnicas de Design Avançadas
  • 📊 Integração de Dados Personalizada
  • 🔄 Atualizações Automatizadas de Template
  • 👥 Colaboração de Template Multi-usuário

💡 Resumo das Melhores Práticas​

Design de Template​

✅ Princípios de design:

  • 🎯 Mantenha simples - Foque nas informações essenciais
  • 📱 Desenhe responsivamente - Teste em diferentes tamanhos de tela
  • 🎨 Mantenha consistência - Use cores e layouts padronizados

Gerenciamento de Template​

✅ Dicas de organização:

  • 📝 Use nomes descritivos - Facilite a localização dos templates
  • 🔄 Manutenção regular - Remova templates não utilizados
  • 👥 Compartilhe padrões - Garanta consistência na equipe

🎨 Pronto para Projetar? Com seu template criado e configurado, você está pronto para implantar visualizações incríveis em suas instalações SmartgridX!